<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue'
    import { initShaderProgram } from './webgl-demo'
    import { initBuffers } from "./init-buffers.js";
    import { drawScene, setColorAttribute } from "./draw-scene.js";

    


    // Vertex shader program

    // const vsSource = `
    //     attribute vec4 aVertexPosition;

    //     uniform mat4 uModelViewMatrix;
    //     uniform mat4 uProjectionMatrix;

    //     void main() {
    //     gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    //     }
    // `;

    // Vertex shader program

    const vsSource = `
        attribute vec4 aVertexPosition;
        attribute vec4 aVertexColor;

        uniform mat4 uModelViewMatrix;
        uniform mat4 uProjectionMatrix;

        varying lowp vec4 vColor;

        void main(void) {
            gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
            vColor = aVertexColor;
        }
    `;


    // Fragment shader program

    // const fsSource = `
    //     void main() {
    //     gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    //     }
    // `;


    // Fragment shader program

    const fsSource = `
        varying lowp vec4 vColor;

        void main(void) {
        gl_FragColor = vColor;
        }
    `;

    onMounted(() => {
        console.log('onMounted')
        const canvas = document.getElementById('glcanvas') as HTMLCanvasElement;
        // 初始化 WebGL 上下文
        const gl = canvas.getContext('webgl') as WebGLRenderingContext;

        // 确认 WebGL 上下文是否可用
        if (!gl) {
            alert("无法初始化 WebGL，你的浏览器、操作系统或硬件等可能不支持 WebGL。");
            return;
        }

        gl.clearColor(0, 1, 0, 1);
        
        gl.clear(gl.COLOR_BUFFER_BIT);

        const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

        const programInfo = {
            program: shaderProgram,
            attribLocations: {
                vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
                vertexColor: gl.getAttribLocation(shaderProgram, "aVertexColor"),
            },
            uniformLocations: {
                projectionMatrix: gl.getUniformLocation(shaderProgram, "uProjectionMatrix"),
                modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
            },
        }


        // Here's where we call the routine that builds all the
        // objects we'll be drawing.
        const buffers = initBuffers(gl);

        setColorAttribute(gl, buffers, programInfo);


        // Draw the scene
        // drawScene(gl, programInfo, buffers,);

        // Draw the scene again
        var then = 0;

        // Draw the scene repeatedly
        function render(now: number) {
            now *= 0.001; // convert to seconds
            const deltaTime = now - then;
            then = now;

            drawScene(gl, programInfo, buffers, deltaTime);

            requestAnimationFrame(render);
        }
        requestAnimationFrame(render);


    })

</script>

<template>
    <canvas id="glcanvas" width="640" height="480">
        你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
    </canvas>
</template>

<style scoped>

</style>